<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import = "java.util.*" %>
<%@ page import = "cs633.util.*" %>    
<%
	String userId = (String) session.getAttribute("userID");
	ArrayList albumList = (ArrayList) session.getAttribute("albums");
	ArrayList photoList = (ArrayList) session.getAttribute("photos");
	ArrayList publicAlbumList = (ArrayList) session.getAttribute("publicalbums");
	ArrayList publicPhotoList = (ArrayList) session.getAttribute("publicphotos");
	String albumName = (String) session.getAttribute("albumName");
	String userSeq = (String) session.getAttribute("userSeq");

%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PhotoShare</title>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js" ></script>
<script type="text/JavaScript" src="js/cloud-carousel.1.0.5.js"></script>
<script type="text/JavaScript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/JavaScript" src="js/slimbox2.js"></script>
<script type="text/JavaScript" src="js/showhide.js"></script> 
<script type="text/JavaScript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	// This initialises carousels on the container elements specified, in this case, carousel1.
	
	$("#photoShare-carousel").CloudCarousel(		
		{			
			reflHeight: 56,
			reflGap:2,
			titleBox: $('#image-title'),
			altBox: $('#image-desc'),
			buttonLeft: $('#but1'),
			buttonRight: $('#but2'),
			yRadius:40,
			xPos: 285,
			yPos: 120,
			speed:0.15,
			mouseWheel:true
		}
	);
	

// ==========
   	$("input[name='albumRadioBtn']:radio").click(function() {
       	rdoVal = $("input[name='albumRadioBtn']:radio:checked").val();		        	
       	$("#albumName").val(rdoVal);
       	
       	$.ajax({
       		type: "POST",
       		url: "userPhotos.action",		        		
       		dataType: "json",
       		data: "userId="+$('#userId').val()+"&albumName="+$("#albumName").val(),
       		success: function (data1) {
       			document.location.href="main.jsp";
       			//window.location.reload();
       		}
       	});
   	});	
   	
   	$("input[name='publicAlbumRadioBtn']:radio").click(function() {
       	rdoVal = $("input[name='publicAlbumRadioBtn']:radio:checked").val();
       	$("#albumName").val(rdoVal);
       	
       	$.ajax({
       		type: "POST",
       		url: "publicPhotos.action",
       		dataType: "json",
       		data: "albumName="+$("#albumName").val(),
       		success: function (data1) {
       			document.location.href="main.jsp";
       			//window.location.reload();
       		}
       	});
   	});	
    
    $('#newPhotoSaveBtn').click(function(e) {
    	rdoVal = $("input[name='albumRadioBtn']:radio:checked").val();
    	if (rdoVal == null) 
    	{
    		alert("Please select an album from your albums list!");
    	}
    	else {
    		$('#newPhotoForm').submit();
    	}
    	
    });
    
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
		}); 
		return false;
	});
	
	$('#newPhotoCancelBtn').live('click', function() { 
		disableBox();
	});	
	
	$('#deletePhotoCancelBtn').live('click', function() { 
		disableBox();
	});
	
	$('#updatePhotoCancelBtn').live('click', function() { 
		disableBox();
	});	
	
	$('#deleteAlbumCancelBtn').live('click', function() { 
		disableBox();
	});
	
	$('#updateAlbumCancelBtn').live('click', function() { 
		disableBox();
	});	
	
   	$('#albumPublish').click(function() {
 	    $.ajax({
 	    	type: "POST",
 	    	url: "publishAlbum.action",
 	       	dataType: "json",
 	       	data: "userSeq="+$('#userSeq').val()+"&albumName="+$("#albumName").val(),
 	       	success: function (data1) {
 	       		document.location.href="main.jsp";
 	       		//window.location.reload();
 	       	}
 	    });
   	});
   	
   	$('#albumUnPublish').click(function() {
 	    $.ajax({
 	    	type: "POST",
 	    	url: "unpublishAlbum.action",
 	       	dataType: "json",
 	       	data: "userSeq="+$('#userSeq').val()+"&albumName="+$("#albumName").val(),
 	       	success: function (data1) {
 	       		document.location.href="main.jsp";
 	       		//window.location.reload();
 	       	}
 	    });
   	});	

	
	$('#newAlbumCancelBtn').live('click', function() { 
		disableBox();
	});
	$('#aboutOKBtn').live('click', function() { 
		disableBox();
	});
	
	$('#albumNew').click(function() {		         
		 loginBox = $('#newAlbum-box');
		 showBox();
	});	

	$('#albumDelete').click(function() {		         
		 loginBox = $('#deleteAlbum-box');
		 showBox();
	});
	
	$('#albumUpdate').click(function() {		         
		 loginBox = $('#updateAlbum-box');
		 showBox();
	});
	
	$('#photoNew').click(function() {		      
		 loginBox = $('#newPhoto-box');
		 showBox();
	});
    
	$('#photoDelete').click(function(e) {		
		 loginBox = $('#deletePhoto-box');
		 showBox();
	});	
	
	$('#photoUpdate').click(function() {		         
		loginBox = $('#updatePhoto-box');      
		showBox();
		$('#updatePhotoTitle').val($('#image-title').text());
		$('#updatePhotoDesc').val($('#image-desc').text());	
	});	
	
	$('#but1').click(function(e) {		
		var index = $("#photoShare-carousel").data("cloudcarousel").frontIndex;
		document.getElementById('photoTitle').value = index;
		document.getElementById('photoId').value = index;
	});
	
	$('#but2').click(function(e) {		
		var index = $("#photoShare-carousel").data("cloudcarousel").frontIndex;
		document.getElementById('photoTitle').value = index;
		document.getElementById('photoId').value = index;
	});	
	$('#aboutLink').click(function() {
		 loginBox = $('#about-box');
		 showBox();
	});
});

function showBox() {	
	$(loginBox).fadeIn(300);
	
	//Set the center alignment padding + border see css style
	var popMargTop = ($(loginBox).height() + 24) / 2; 
	var popMargLeft = ($(loginBox).width() + 24) / 2; 
	
	$(loginBox).css({ 
		'margin-top' : -popMargTop,
		'margin-left' : -popMargLeft
	});
	
	// Add the mask to body
	$('body').append('<div id="mask"></div>');
	$('#mask').fadeIn(300);
	return false;
}

function disableBox() {
	$('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
}
</script>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/widget76.css" type="text/css" media="screen"> 

<style type="text/css">
body
{
   background-color: transparent;
   color: #000000;
   background: #1c1d1f;
}
</style>
<style type="text/css">
a
{
   color: #C8D7EB;
   outline: none;
   text-decoration: none;
}
a:visited
{
   color: #C8D7EB;
}
a:active
{
   color: #C8D7EB;
}
a:hover
{
   color: #376BAD;
   text-decoration: none;
}
#container {	
	width:800px;	
	margin-left:auto;
	margin-right:auto;
	/*background-color:#fff;*/			
}
#banner {	
	background-repeat:no-repeat;
	height:105px;	
	position:relative;
	z-index:10;	
}
#bannertext {
	display:none;
	font-size:14px;
	font-weight:bold;
	letter-spacing:1px;
	position:absolute;
	left:256px;
	top:60px;
	color:#f90;
	font-family:Tahoma, Geneva, sans-serif;
}
#logo {
	position:absolute;
	display:inline-block;	
	left:20px;
	top:0px;
	width:256px;
	height:56px;
	border:none;	
	cursor:pointer;
	float:left;
	z-index:11;
}
/* General */
#cssdropdown { 
	position:absolute;	
	top:6px;
	left:330px;
	z-index:10000;
	background:none;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	letter-spacing:0px;
	font-size:12px;
	
}
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0;  }

/* Head links */
#cssdropdown li.headlink { float: left; width:auto; display:block;  }
#cssdropdown li.headlink a { display:block; color:#fff; padding: 4px; padding-bottom:10px; text-decoration:none; padding-right:20px;}
#cssdropdown li.headlink a:hover { color:#fff;}

/* Child lists and links */
/* the abs position allows the drop down to have its own width without affecting the tab widths */
#cssdropdown li.headlink ul { display: none;  text-align: left; position:absolute; width:174px;} /* this is the image width */
#cssdropdown li.headlink:hover ul { display: block; }
/* Links within the menu */
#cssdropdown li.headlink ul li a {
	padding: 5px 10px 3px 10px; 
	margin:0px; color:#fff; 
	text-decoration:none; 
	width:156px; /* this is the space available for text */
	font-weight:normal;
	font-size:12px;
	font-weight:bold;
	text-transform:none;
}
#cssdropdown li.headlink ul li a:hover { text-decoration:none;background-color:#cc6600;width:146px;}
/* Pretty styling */	
/*#cssdropdown a { color: black; }*/
#cssdropdown ul li a:hover { text-decoration: none; }	
/* The drop down menu itself. */
/*
#cssdropdown li.headlink ul { z-index:10000;
background-image: url(/images/dropmenu.png);
background-position: bottom;
padding-bottom: 15px;
background-repeat:no-repeat;

}
*/	
.enclosedBox {
    border-top: solid 1px #666666;
    border-right: solid 1px #2d2d2d;
    border-left: solid 1px #2d2d2d;
    border-bottom: solid 1px #2d2d2d;
    /* Changed by Mike */
    /*background: transparent url(http://cdn.smugmug.com/img/gradients/medium_black.gif) repeat-x;*/
    background:#000000;
}	

.box {
    background-color: transparent;
}
.boxTop {
    border-bottom: solid 1px #666666;
}
.boxBottom {
    background: transparent url(images/medium_black.gif) repeat-x;
  	border-right: solid 1px #2d2d2d;
    border-left: solid 1px #2d2d2d;
    border-bottom: solid 1px #2d2d2d;
}
.browse .leftColumn, #communityHome .leftColumn, .pricing .leftColumn, .news .leftColumn {
    width: 570px;
    float: left;
    display: inline;
}
.browse .rightColumn, #communityHome .rightColumn, .pricing .rightColumn, .news .rightColumn {
    width: 210px;
    padding-left: 20px;
    float: left;
    display: inline;
}
/*
.leftColumn {
    display: inline;
    float: left;
    width: 570px;
}
.rightColumn {
    display: inline;
    float: left;
    width: 345px;
    padding-left: 10px;
}
*/
.notopmargin {
    margin-top: 0 !important;
}
ul,ol {
    margin: 0 0 10px 0;
    padding: 10px 0 0 30px;
}

ul.noindent, ol.noindent {
    padding-left: 20px;
}

.carouselLeft {	
	display:none;
	background:url(images/rotate-left.png);	
	width:40px; height:40px;
	background-position: 0px 0px;
}
.carouselLeft:hover {		
	width:40px; height:40px;
	background-position: 0px 40px;
	cursor:auto;
}
.carouselRight {
	display:none;
	background:url(images/rotate-right.png);	
	width:40px; height:40px;
	background-position: 0px 0px;
}
.carouselRight:hover {	
	width:40px; height:40px;
	background-position: 0px 40px;
}

.spacer {
    clear: both;
}

.login-popup{
	display:none;
	background: #333;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}

.textbox label { 
	display:block; 
	padding-bottom:7px;
	color:#fff; 
	font-size:14px;
	width: 100px;
}

.textbox span { 
	display:block;
	width: 250px;
}

span { 
	color:#fff; 
	font-size:16px; 
	line-height:18px;
} 

.textbox input, .textbox textarea { 
	background:#666666; 
	border-bottom:1px solid #333;
	border-left:1px solid #000;
	border-right:1px solid #333;
	border-top:1px solid #000;
	color:#fff; 
        border-radius: 3px 3px 3px 3px;
	-moz-border-radius: 3px;
        -webkit-border-radius: 3px;
	font:13px Arial, Helvetica, sans-serif;
	padding:6px 6px 4px;
	width:200px;
}

input:-moz-placeholder { color:#bbb; text-shadow:0 0 2px #000; }
input::-webkit-input-placeholder { color:#bbb; text-shadow:0 0 2px #000;  }
img.btn_close { 
	float: right; 
	margin: -28px -28px 0 0;
}

</style>

<style type="text/css">

</style>
</head>
<body>
<input type="hidden" name="userId" id="userId" value=<%= userId %>>

<div id="about-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>	
	<fieldset class="textbox">
		<center>													
		<span>PhotoShare</span><br>											
		<label>Arnold, Matthew </label>
		<label>Craig, Adisa</label>
		<label>Kellish, Scott </label>		
		<label>Yeh, Nelson</label>
		</center>		
	</fieldset>		
	<div align="right">		
		<input type="button" id="aboutOKBtn" value="OK" >
	</div>
	
</div>

<div id="newPhoto-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="newPhotoForm" action="upload.action" method="POST" enctype="multipart/form-data">
		<fieldset class="textbox">					
			<input type="file" size="15" name="userImage" style="color:#000000">				
			<input type="hidden" id="albumName" name="albumName">										
			<span>Title</span>
			<input id="imageTitle" name="imageTitle" type="text" >										
			<span>Desc</span>
			<textarea id="imageTitle" name="imageDesc"></textarea>
		</fieldset>		
		<div align="right">		
			<input type="button" id="newPhotoSaveBtn" value="Save" >
			<input type="button" id="newPhotoCancelBtn" value="Cancel" >
		</div>
	</form>
</div>

<div id="deletePhoto-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="deleteForm" action="deletePhoto.action" method="POST">
		<fieldset class="textbox">											
			<input type="hidden" id="photoTitle" name="photoTitle">			
			<span>Are you sure you want to delete the image?</span>																
		</fieldset>		
		<div align="right">		
			<input type="submit" id="deletePhotoDeleteBtn" value="Delete" >
			<input type="button" id="deletePhotoCancelBtn" value="Cancel" >
		</div>
	</form>
</div>
<div id="updatePhoto-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="updatePhotoForm" action="updatePhoto.action" method="POST" >
		<input type="hidden" id="photoId" name="photoId">
		<fieldset class="textbox">																						
			<span>Title</span>
			<input id="updatePhotoTitle" name="updatePhotoTitle" type="text" >										
			<span>Desc</span>
			<textarea id="updatePhotoDesc" name="updatePhotoDesc"></textarea>
		</fieldset>		
		<div align="right">		
			<input type="submit" id="updatePhotoSaveBtn" value="Save" >
			<input type="button" id="updatePhotoCancelBtn" value="Cancel" >
		</div>
	</form>
</div>

<div id="newAlbum-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="newAlbumForm" action="newAlbum.action" method="POST" >
		<fieldset class="textbox">			
			<span>New Album Name</span>
			<input id="newAlbumName" name="newAlbumName" type="text" >
		</fieldset>		
		<div align="right">		
			<input type="submit" id="newAlbumSaveBtn" value="Save" >
			<input type="button" id="newAlbumCancelBtn" value="Cancel" >
		</div>
	</form>
</div>

<div id="deleteAlbum-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="deleteAlbumForm" action="deleteAlbum.action" method="POST" >
		<fieldset class="textbox">													
			<span>Are you sure you want to delete the album "<%=albumName%>"?</span>			
		</fieldset>		
		<div align="right">		
			<input type="submit" id="deleteAlbumDeleteBtn" value="Delete" >
			<input type="button" id="deleteAlbumCancelBtn" value="Cancel" >
		</div>
	</form>
</div>
<div id="updateAlbum-box" class="login-popup">
	<a href="#" class="close"><img src="images/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
	<form id="updateAlbumForm" action="updateAlbum.action" method="POST" >
		<fieldset class="textbox">											
			<span>New Album Name</span>
			<input id="updateAlbumName" name="updateAlbumName" type="text" >
		</fieldset>		
		<div align="right">
			<input type="submit" id="updateAlbumSaveBtn" value="Save" >
			<input type="button" id="updateAlbumCancelBtn" value="Cancel" >
		</div>
	</form>
</div>
<div id='container'>
	<div id='banner'>
		<a id="logo" href="#">
		<span style="color:#FFFFFF;font-family:'Arial, Helvetica, sans-serif';font-size:27px;"><strong>PhotoShare</strong></span>
		</a>   		
	    <ul id="cssdropdown">        
	        <li class="headlink"><a href="#">Home</a></li>            
	        <li class="headlink">
	         <a href="#">My Account (<%= userId %>)</a>
	         <!-- 	                   
	         <ul>          
	          <li><a href="/mainsite/carousel.htm">New Album</a></li>
	          <li><a href="/mainsite/lens-flare.htm">Delete Album</a></li>
	          <li><a href="/mainsite/lens-flare.htm">Update Album</a></li>
	          <li><a href="/mainsite/cloud-zoom.htm">Delete Image</a></li>                     
	         </ul>	   
	         -->      
	         </li>             
			  <li class="headlink"><a href="#" id="aboutLink">About</a></li>
			  <li class="headlink"><a href="/PhotoShare" id="signoutLink">Sign Out</a></li>	          
	    </ul>
	</div>
	
	<div class="browse">
	<div class="leftColumn">
	<div class="box">
	<div id="photoShare-carousel" class="boxBottom" style="width: 570px; height: 384px;  
		background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; position: relative; 
		overflow-x: hidden; overflow-y: hidden; background-position: initial initial; background-repeat: initial initial; ">
		<div style="position: absolute; width: 100%; height: 100%; display: block;" id="photos">
		<%
			if (photoList != null) {
				Photo photo = null;
				for (int i = 0; i < photoList.size(); i++) {
					photo = (Photo) photoList.get(i);  						
		%>
	            <a href="images/s3/images/<%=photo.getAlbumLoc() %>/<%=photo.getPhotoName() %>" rel="<%=photo.getPhotoName()%>" title="<%=photo.getPhotoTitle()%>">
		            <img class="cloudcarousel" src="images/s3/images/<%=photo.getAlbumLoc() %>/<%=photo.getPhotoName() %>" width="128" height="164" alt="<%=photo.getPhotoDesc()%>" 
		            title="<%=photo.getPhotoTitle()%>" style="position: absolute; left: 221px; top: 160px; z-index: 100; ">
		            <canvas class="reflection" style="position: absolute; left: 221px; top: 326px; width: 128px; height: 56px; " 
		            width="128" height="56" title="<%=photo.getPhotoTitle()%>"></canvas>
	            </a>		
		<%
				}
			}
		%> 			
				<div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px; display: inline; "></div>
	 			<div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px; display: inline; "></div> 
	 	</div>
	</div>  
	</div>

	<!-- buttom -->
	<br>
	<div class="box">		
		<label style="color:#8cca1e;font-weight:bold;">Title:</label>
		<div id="image-title" style="color:#fff;display: block;"></div>
	</div>
	<br>
	<div class="box">
		<label style="color:#8cca1e;font-weight:bold;">Description:</label>
		<br>
		<div id="image-desc" style="color:#fff;display: block;"></div>

	</div>
	</div>
	<div class="rightColumn">
	<div class="box">
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Image</label>
			<label style="color:#8cca1e;cursor:pointer;" id="photoNew">[New]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="photoDelete">[Delete]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="photoUpdate">[Update]</label>				
			<div class="spacer"></div>
		</div>
		
		<div class="boxBottom">	 
		</div>	
		
	</div>
	<br>
	<div class="box">		
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Album</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumNew">[New]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumDelete">[Delete]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumUpdate">[Update]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumPublish">[Publish]</label>
			<label style="color:#8cca1e;cursor:pointer;" id="albumUnPublish">[Unpublish]</label>
		</div>
		<div class="boxBottom">
			<div style="height: 270px;" id="album">
				<%										
					if (albumList != null) {
						
						for (int i = 0; i < albumList.size(); i++) {
							Album album = (Album) albumList.get(i);	
							if (album.getAlbumName().equals(albumName)) {
				%>
								<input type="radio" checked name="albumRadioBtn" class="noindent" value="<%=album.getAlbumName()%>"><label style="color:#ffffff;"><%= album.getAlbumName() %></label><br>
				<%
							} else {
				%>
								<input type="radio" name="albumRadioBtn" class="noindent" value="<%=album.getAlbumName()%>"><label style="color:#ffffff;"><%= album.getAlbumName() %></label><br>
				<%
							}
				
						}
					}
				%>
			</div>
		</div>
	</div><br>
	<div class="box">		
		<div class="boxTop">
			<label style="color:#8cca1e;font-weight:bold;">Public Albums</label>			
		</div>
		<div class="boxBottom">
			<div style="height: 270px;" id="album">
				<%										
					if (publicAlbumList != null) {
						
						for (int i = 0; i < publicAlbumList.size(); i++) {
							Album album = (Album) publicAlbumList.get(i);	
							if (album.getAlbumName().equals(albumName)) {
				%>
								<input type="radio" checked name="publicAlbumRadioBtn" class="noindent" value="<%=album.getAlbumName()%>"><label style="color:#ffffff;"><%= album.getAlbumName() %></label><br>
				<%
							} else {
				%>
								<input type="radio" name="publicAlbumRadioBtn" class="noindent" value="<%=album.getAlbumName()%>"><label style="color:#ffffff;"><%= album.getAlbumName() %></label><br>
				<%
							}
				
						}
					}
				%>
			</div>
		</div>
	</div>
	</div>
	</div>	
</div>      
</body>
</html>